<template>
    <div class="content">
        <div class="content_opertors">
            <div class="left">
                <a-button type="primary" @click="mainQuery">查询</a-button>
                    <a-button type="primary" @click="exportExcel(dataSource, columns, '全省资金预警（月）.xlsx')">导出</a-button>
            </div>
            <div class="right">
                <a-form :model="topForm" name="basic" layout="inline" autocomplete="off">
                    <a-form-item label="年度月份：" name="yearAndmonth" :rules="[{ required: true }]">
                        <a-date-picker v-model:value="topForm.yearAndmonth" picker="month" placeholder="---请选择---" style="width: 100px" @change="dateChangeFn" />
                    </a-form-item>
                    <a-form-item label="金额单位：" name="amt_unit" :rules="[{ required: true }]">
                        <a-select v-model:value="topForm.amt_unit" style="width: 80px" @change="amtChangeFn">
                            <a-select-option :value="1">元</a-select-option>
                            <a-select-option :value="10000">万元</a-select-option>
                            <a-select-option :value="100000000">亿元</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <div class="grid">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :rowKey="(record) => record.itemIndex"
                bordered
                size="small"
                :scroll="{ y: '64vh' }"
                :pagination="false"
                :loading="loading"
                @resizeColumn="handleResizeColumn"
            ></a-table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { toThousands, exportExcel } from '@/util/common';

import { provinceWarningQuery } from '@/request/api/treasuryWarningPhoto';

// 右上角年度月份、金额单位表单数据
let topForm = reactive({
    yearAndmonth: dayjs(),
    amt_unit: 10000,
});

// 日期选择框事件
const dateChangeFn = (date, dateStr) => {
    topForm.yearAndmonth = date;
    mainQuery();
};

// 金额选择框事件
const amtChangeFn = (date, option) => {
    mainQuery();
};

// 表格相关数据
const columns = ref([
    {
        title: '财政区划',
        dataIndex: 'mof_div_name',
        key: 'mof_div_name',
        width: 200,
        align: 'left',
        resizable: true,
    },
    {
        title: '红色预警库款差额',
        dataIndex: 'red',
        key: 'red',
        width: 260,
        align: 'right',
        resizable: true,
        customRender: ({ text }) => {
            return toThousands(text);
        },
    },
    {
        title: '橙色预警库款差额',
        dataIndex: 'orange',
        key: 'orange',
        width: 260,
        align: 'right',
        resizable: true,
        customRender: ({ text }) => {
            return toThousands(text);
        },
    },
    {
        title: '黄色预警库款差额',
        dataIndex: 'yellow',
        key: 'yellow',
        width: 260,
        align: 'right',
        resizable: true,
        customRender: ({ text }) => {
            return toThousands(text);
        },
    },
    {
        title: '绿色预警库款差额',
        dataIndex: 'green',
        key: 'green',
        width: 260,
        align: 'right',
        resizable: true,
        customRender: ({ text }) => {
            return toThousands(text);
        },
    },
]);
// dataSource
let dataSource = ref([]);
// 拖动列宽
const handleResizeColumn = (w, col) => {
    col.width = w;
};
// 加载动画
let loading = ref(false);
// 复选框
const state = reactive({
    selectedRowKeys: [],
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    console.log('selectedRowKeys changed: ', selectedRows);
    state.selectedRowKeys = selectedRowKeys;
};

// 分页
const pageSizeChange = (val, pageNum) => {
    pagination.pageSize = pageNum;
    pagination.current = 1;
    const params = {
        rows: pagination.pageSize,
        page: pagination.current,
    };
};

const pageChange = (page, val) => {
    pagination.current = page;
    const params = {
        rows: pagination.pageSize,
        page: pagination.current,
    };
    queryFun();
};

const pagination = reactive({
    current: 1,
    pageSize: 50,
    showSizeChanger: true,
    total: 0,
    pageSizeOptions: ['50', '100', '200', '500'],
    showTotal: (total) => `共 ${total} 条数据`,
    onShowSizeChange: pageSizeChange,
    onChange: pageChange,
});

// 查询按钮
const mainQuery = () => {
    queryFun();
};

// 查询事件
const queryFun = () => {
    loading.value = true;
    let params = {
        amtUnit: topForm.amt_unit,
        reportDate: dayjs(topForm.yearAndmonth).format('YYYYMM'),
        mofDivCode: ''
    };
    provinceWarningQuery(params).then((res) => {
        loading.value = false;
        if (res.state == '200') {
            const { hotData, data } = res;
            dataSource.value = data;
            message.success(res.msg || '查询成功！');
        } else {
            dataSource.value = [];
            message.error(res.msg || '查询失败！');
        }
    });
};

onMounted(() => {
    queryFun();
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 20px;

    .content_opertors {
        display: flex;
        justify-content: space-between;
        height: 32px;
        margin-bottom: 20px;

        .left .ant-btn {
            margin-right: 16px;
        }

        .right .ant-form-item {
            margin-bottom: 0;
        }
    }
    .grid {
        height: calc(100% - 52px);
    }
    :deep(.ant-table-cell) {
        overflow: hidden;
    }
    :deep(.ant-table-body) {
        height: 100%;
    }
}
</style>
